<template>
    <el-dialog v-model="logDialog" :title="staticData.title" :width="staticData.width" :before-close="handleClose">
        <el-form :model="logForm" ref="logRef" :rules="logRules" label-width="120px">
            <el-form-item label="跟进方式" prop="follow_method">
                <el-select v-model="logForm.follow_method" clearable placeholder="请选择">
                    <el-option v-for="(item,index) in follow_method" :key="index" :label="item.value" :value="item.name"/>
                </el-select>
            </el-form-item>
            <el-form-item label="跟进阶段" prop="follow_stage">
                <el-select v-model="logForm.follow_stage" clearable placeholder="请选择">
                    <el-option v-for="(item,index) in follow_stage" :key="index" :label="item.value" :value="item.name"/>
                </el-select>
            </el-form-item>
            <el-form-item label="跟进见容" prop="content">
                <el-input type="textarea" :rows="5" v-model="logForm.content" placeholder="请输入跟进内容"></el-input>
            </el-form-item>
            <el-form-item label="上传附件" prop="files">
                <el-upload :file-list="fileList" :accept="before.accept" :action="before.action" :headers="headers" :limit="before.limit" :size="before.size" multiple :before-upload="beforeUpload" :on-change="handSuccess" :on-remove="handleRemove" :on-exceed="handleExceed" :on-preview="handlePreview">
                    <template #trigger>
                        <el-button type="success">选择文件</el-button>
                    </template>
                    <template #tip>
                        <div class="el-upload__tip">
                            支持格式：<span class="fxn-text-red">{{before.accept}}</span>，单个文件不能超过<span class="fxn-text-red">{{before.size}}MB </span>， 最多可上传<span class="fxn-text-red">{{before.limit}}个</span>文件
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button :loading="btnLoading" type="primary" @click="handleSubmit">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        props: {
            logDialog: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            staticData: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        emits: ['update:logDialog','handleDialog'],
        setup(props) {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                follow_method: computed(() => store.state.configEnable.follow_method),
                follow_stage: computed(() => store.state.configEnable.follow_stage),

                //Form表单
                btnLoading: false,
                logRef: '',
                logForm: {
                    customer_id: '',
                    follow_method: '',
                    follow_stage: '',
                    content: '',
                    files: '',
                },
                logRules: {
                    follow_method: [
                        { required: true, message: '请选择跟进方式', trigger: 'blur' }
                    ],
                    follow_stage: [
                        { required: true, message: '请选择跟进阶段', trigger: 'blur' }
                    ],
                },

                //上传文件
                fileList: [],
                before: {
                    limit: 100,
                    size: 200,
                    accept: '.jpg,.png,.docx,.pdf,.xlsx,.pptx',
                    action: proxy.PathUrl + '/index/Upload/file',
                },
                headers: {
                    token: localStorage.getItem('token')
                },

                //窗口
                logDialog: computed({
                    get: ()=>{
                        return props.logDialog
                    },
                    set: ()=>{
                        return props.logDialog
                    }
                }), 
            })

            //提交
            const handleSubmit = () => {
                state.logForm.customer_id = props.staticData.customer_id;
                let files = [];
                if(!state.fileList || state.fileList.length > 0){
                    for(let key in state.fileList){
                        files.push(state.fileList[key].response.data.path);
                    }
                }
                state.logForm.files = String(files);
                state.logRef.validate((valid) => {
                    if(valid){
                        state.btnLoading = true;
                        proxy.$http.post('/oa/Customer/noteForm', state.logForm)
                        .then(res=> {
                            state.btnLoading = false;
                            const { code, msg ,data } = res;
                            if(code != 1){
                                return proxy.$msg.error(msg);
                            }else{
                                state.logDialog = false;
                                proxy.$msg.success('提交成功');
                                proxy.$emit('update:logDialog', false);
                                proxy.$emit('handleDialog');
                                proxy.$refs.logRef.resetFields();
                            }
                        })
                    }
                })
            }

            //关闭弹窗
            const handleClose = () => {
                proxy.$emit('update:logDialog', false);
                proxy.$refs.logRef.resetFields();
            }

            //上传成功
            const handSuccess = (file,fileList) => {
                state.fileList = fileList;
            }

            //文件较验
            const beforeUpload = (file,fileList) => {
                //文件格式较验
                let arrFormat = state.before.accept.split(',')
                let arr = [];
                for(let key in arrFormat){
                    arr.push(arrFormat[key].slice(1))
                }

                //文件格式不正确
                if(arr.indexOf(file.name.split('.')[1]) < 0){
                    proxy.$msg.error('文件格式不正确,请重新选择!');
                    return false;
                }
                
                //文件大小较验
                if(file.size / 1024 / 1024 > state.before.size){
                    proxy.$msg.error('文件大小不能超过' + state.before.size + 'Mb');
                    return false;
                }
            }

            //删除
            const handleRemove = (file,fileList) => {
                if(file.status == 'ready'){
                    return proxy.$msg.error('访文件存在不可预知的错误，请谨慎选择所上传的文件!');
                }
                proxy.$msg.success('文件已删除成功!');
            }

            //限制文件
            const handleExceed = (file,fileList) => {
                proxy.$msg.error(`当前限制选择 ${state.before.limit} 个文件，本次选择了 ${file.length} 个文件，共选择了 ${file.length + fileList.length} 个文件`);
            }

            //查看文件
            const handlePreview = (file) => {
                window.open(file.response.data.url);
            }
            
            //Dom加载
            onMounted(()=>{
                
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                handleSubmit,
                handleClose,
                
                //组件方法
                beforeUpload,
                handSuccess,
                handleRemove,
                handleExceed,
                handlePreview,
            }

        },
    })
</script>

<style scoped>
    
</style>